<!--
 * @Author: your name
 * @Date: 2022-01-04 10:52:21
 * @LastEditTime: 2022-02-10 13:37:49
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \agricultural-production-web\src\views\statistical-report\components\main\index.vue
-->
<template>
  <div class="main">
    <i></i>
    <div class="main-top">
      <div class="main-name">
        <slot name="top-name"></slot>
      </div>
    </div>
    <div class="main-content">
      <slot name="main-content"></slot>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style lang="scss" scoped>
.main {
  width: 100%;
  // height: 309px;
  background: #03485e30;
  position: relative;
  // margin: 0 auto;
  >i {
    display: inline-block;
    width: 90%;
    left: 5%;
    position: absolute;
    top: -1px;
    border-top: 1px solid;
    border-image: linear-gradient(90deg, #00FFF700, #00FFF7, #00FFF700) 30 30;
  }
  .main-top {
    width: 100%;
    height: 30px;
    position: absolute;
    top: 0;
    border-bottom: 1px solid #02637D80;
    .main-name {
      background: url("~@/assets/statistical-report/top-hexagon.png") 100% 100%
        no-repeat;
      background-size: 100% 100%;
      position: absolute;
      top: 0;
      left: 50%;
      transform: translate(-50%, -44%);
      width: 170px;
      height: 50px;
      color: #00FFF7;
      text-align: center;
      line-height: 42px;
      // box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.16);
      opacity: 1;
    }
  }
  .main-content {
    width: 100%;;
    position: absolute;
    bottom: 0;
    // display: flex;
    // flex-direction: column;
    // align-items: center;
    // justify-content: flex-end;
    padding: 10px;

  }
}
</style>
